import React from 'react';
import {Button,Select,DatePicker,Table,Form} from 'antd';
const FormItem = Form.Item;
let love = React.createClass({
    getInitialState(){
      return{
        state:true,
        type:'',
        actype:'',
        dateRange:[],
        cashData:[],
         pagination: {
                currentPage: 1,
                pageSize: 5
            },
      };
    },
    componentDidMount(){
       this.handleSearch();
    },
      handleSearch() {
        this.setState({
          pagination: {
            currentPage: 1,
            pageSize: 5
          }
        })
        this.fetch();
    },
    fetch(){
      let self = this;
      let forms = this.props.form.getFieldsValue();
      let now = new Date();
      let page = this.state.pagination.currentPage;
        console.log(forms.tradeType);
        console.log(forms.acType);
      let data = {
        // startTime:this.state.dateRange[0]||now.toLocaleDateString(),
        // endTime:this.state.dateRange[1]||now.toLocaleDateString(),
        startTime:this.state.dateRange[0]||'',
        endTime:this.state.dateRange[1]||'',
        tradeType:forms.tradeType,
        acType:forms.acType,
      };
      let params = Object.assign({}, {pageSize: 5, currentPage: page}, data);

      console.log(data);
      Utils.sendAjax({
        url:'/user/account/list',
        data:JSON.stringify(params),
        callback:function(result){
          if(result.code == '200'){
            console.log(result);
             self.setState({
                cashData:result.data,
                pagination: result.page
              });

          }
        }
      });
    },
    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.currentPage = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },
    handleReset() {
      this.props.form.resetFields();
    },
    typeChange(value){
      this.setState({
        type:value
      });
    },
    dateChange(date,dateString){
      this.setState({
        dateRange:dateString
      });
    },
     onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
        this.setState({
          dateRange:dateString
      });
    },
    onOk(value) {
      console.log('onOk: ', value);
    },
    render(){
      const Option = Select.Option;
      const RangePicker = DatePicker.RangePicker;
      const tradeType = {201:'充值',202:'偿还贷款',203:'房租支付',204:'房租退款',205:'转入基础账户',206:'提现',207:'提现退款',208:'获得还款',209:'转入增值账户',210:'房租收入',101:'发送短信扣费',102:'充值转入'};
      const acType = {1:'基础账户',2:'增值账户'};
      const Columns =[ 
        {
         title:'交易账户',
         dataIndex:'acType',
         key:'acType',
         render:text => <span>{acType[text]}</span>,
      },
        {
         title:'交易时间',
         dataIndex:'createTime',
         key:'createTime'
      },{
        title:'交易类型',
        dataIndex:'tradeType',
        key:'tradeType',
        render: text => <span>{tradeType[text]}</span>,
      },{
        title:'交易金额',
        dataIndex:'amount',
        key:'amount'
      },{
        title:'备注',
        dataIndex:'remark',
        key:'remark'
      }];
      const data = this.state.cashData;
      const { getFieldProps } = this.props.form;
      const tradeProps = getFieldProps('tradeType',{initialValue: ''});
      const acTypeProps = getFieldProps('acType',{initialValue: ''});
      return (
        <div>
        <div className='formList search-bar'>

             <Form inline style={{paddingBottom:'20px'}}>
                <FormItem label='交易账户'>
                 <Select {...acTypeProps} style={{width:'162px'}}>
                <Option value=''>全部</Option>
                <Option value='1'>基础账户</Option>
                <Option value='2'>增值账户</Option>
                </Select>
               </FormItem>
               <FormItem label='交易时间'>
                <RangePicker
                        showTime
                        format="YYYY-MM-dd HH:mm:ss"
                        placeholder={['Start Time', 'End Time']}
                        onChange={this.onChange}
                        onOk={this.onOk}
                        />
               </FormItem>
                <FormItem label='交易类型'>
                 <Select {...tradeProps} style={{width:'162px'}}>
                 <Option value=''>全部</Option>
                <Option value='201'>充值</Option>
                <Option value='202'>偿还贷款</Option>
                <Option value='210'>房租收入</Option>
                <Option value='204'>房屋退款</Option>
                <Option value='205'>转入基础账户</Option>
                <Option value='206'>提现</Option>
                <Option value='207'>提现退款</Option>
                <Option value='208'>获得还款</Option>
                <Option value='209'>转入增值账户</Option>
                <Option value='101'>发送短信扣费</Option>
                <Option value='102'>充值转入</Option>
                </Select>
               </FormItem>
              <FormItem>
               <Button type='primary' onClick={this.handleSearch} style={{marginRight:'20px'}}>查 询</Button>
               <Button type='primary' onClick={this.handleReset}>重 置</Button>
               </FormItem>
               <FormItem>
             </FormItem>
             </Form>


           <div className='formBody'>
             <Table columns={Columns} dataSource={data} rowKey={record => record.id}
             onChange={this.handleTableChange}
                       pagination={this.state.pagination}/>
           </div>
        </div>
        </div>
      )
    }
});
love = Form.create()(love);
export default love;
